<template>
    <div class="allCustomersManagement">
      <div class="export">
        <Button type="primary" @click="exportExcel">导出excel</Button>
      </div>
      <Table ref="TableHeight" :max-height="onresizeHeight" :columns="columns1" :data="data1"></Table>
      <!-- 分页 -->
      <div class="pagePublicStyle" v-show="pageData.total > 0">
        <div class="totalCount">
          当前第 {{pageData.page}} 页，
          当前第 {{(pageData.page-1)*pageData.rows+1}} 条到第 {{pageData.page*pageData.rows>pageData.total?pageData.total:pageData.page*pageData.rows}} 条，
          共 {{pageData.total}} 条
        </div>
        <Page class="pager" :pageSize="pageData.rows" :total="pageData.total" :current="pageData.page" :page-size-opts="pageData.pageSizeOpts" @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun" placement="top" show-elevator show-sizer />
      </div>
      <!-- table 头部筛选 -->
      <table_filter :options="options" @cancelFilterFun="cancelFilterFun" @okFilterFun="okFilterFun"></table_filter>
    </div>
</template>
<script>
  import table_filter from '@/components/table_filter'
  import { propertyReportlist } from "@/api/marketingManagement.js";
  import { getHousePlanReport } from "@/api/homeApi.js";
  import {buildExport} from "@/common/axios"
  import tool from "@/common/tool.js"
  export default {
    components: {
      table_filter
    },
    data() {
        return {
          onresizeHeight: 0,
          pageData: {
            total: 0,
            page: 1,
            rows: 14,
            pageSizeOpts: [20, 30, 40, 50]
          },
          userMess: tool.getStorage("userMess"),
          stageList: [{text:'首访',value:1}, {text:'复看',value:2}],
          options: {
            type: '',   // form类型  Input / DatePicker / Checkbox / Select / 操作配置头部
            placeholder: '',  // 提示语
            left: -1000,    // 弹框fixed => left
            iconLeft: 0,  // 弹框icon => left
            top: -1000,    // 弹框fixed => top
            width: 218,   // 弹框fixed => top
            setTimeout: null,    // 鼠标离开三角形 200毫秒 关闭弹框
            reportName: '',
            ownedCase: '',
            ownedCustomer: '',
            affiliatedConsultant: '',
            sendStatus: '',
            sendStatusList: [{name: '展示全部', val: '-1'}, {name: '未发送', val: '1'}, {name: '已发送', val: '2'}],
            creationTime: '',
            sendTime: ''
          },
          columns1: [
            {
              title: '报告ID ',
              key: 'reportId',
              minWidth: 100
            },
            {
              title: '报告名称',
              key: 'reportName',
              minWidth: 160,
              render: (h, params) => {
                return h("div", [
                  h(
                    "span",
                    {
                      style: {
                        display: "inline-block",
                        width: "100%",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap"
                      },
                      domProps: {
                        title: params.row.reportName
                      }
                    },
                    params.row.reportName
                  )
                ]);
              },
              renderHeader: (h, params) => {
                return h('div',[
                  h('span', {}, '报告名称'),
                  h('Icon', {
                    props: {
                      type: 'ios-arrow-down',
                      size: '16'
                    },
                    style: {
                      marginLeft: '5px'
                    },
                    nativeOn: {
                      'mouseover': (event) => {
                        event.stopPropagation();
                        this.thMouseoverFun(event, 'input-reportName', '请输入报告名称', 218);
                      },
                      'mouseleave': (event) => {
                        event.stopPropagation();
                        this.thMouseoutFun();
                      }
                    }
                  })
                ])
              }
            },
            {
              title: '所属案场',
              key: 'buildingAlias',
              minWidth: 140,
              render: (h, params) => {
                return h("div", [
                  h(
                    "span",
                    {
                      style: {
                        display: "inline-block",
                        width: "100%",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap"
                      },
                      domProps: {
                        title: params.row.buildingAlias
                      }
                    },
                    params.row.buildingAlias
                  )
                ]);
              },
              // renderHeader: (h, params) => {
              //   return h('div',[
              //     h('span', {}, '所属案场'),
              //     h('Icon', {
              //       props: {
              //         type: 'ios-arrow-down',
              //         size: '16'
              //       },
              //       style: {
              //         marginLeft: '5px'
              //       },
              //       nativeOn: {
              //         'mouseover': (event) => {
              //           event.stopPropagation();
              //           this.thMouseoverFun(event, 'input-ownedCase', '请输入所属案场', 218);
              //         },
              //         'mouseleave': (event) => {
              //           event.stopPropagation();
              //           this.thMouseoutFun();
              //         }
              //       }
              //     })
              //   ])
              // }
            },
            {
              title: '所属客户',
              key: 'customerName',
              minWidth: 120,
              render: (h, params) => {
                return h("div", [
                  h(
                    "span",
                    {
                      style: {
                        display: "inline-block",
                        width: "100%",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap"
                      },
                      domProps: {
                        title: params.row.customerName
                      }
                    },
                    params.row.customerName
                  )
                ]);
              },
              // renderHeader: (h, params) => {
              //   return h('div',[
              //     h('span', {}, '所属客户'),
              //     h('Icon', {
              //       props: {
              //         type: 'ios-arrow-down',
              //         size: '16'
              //       },
              //       style: {
              //         marginLeft: '5px'
              //       },
              //       nativeOn: {
              //         'mouseover': (event) => {
              //           event.stopPropagation();
              //           this.thMouseoverFun(event, 'input-ownedCustomer', '请输入所属客户', 218);
              //         },
              //         'mouseleave': (event) => {
              //           event.stopPropagation();
              //           this.thMouseoutFun();
              //         }
              //       }
              //     })
              //   ])
              // }
            },
            {
              title: '所属顾问',
              key: 'userName',
              minWidth: 120,
              render: (h, params) => {
                return h("div", [
                  h(
                    "span",
                    {
                      style: {
                        display: "inline-block",
                        width: "100%",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap"
                      },
                      domProps: {
                        title: params.row.userName
                      }
                    },
                    params.row.userName
                  )
                ]);
              },
              // renderHeader: (h, params) => {
              //   return h('div',[
              //     h('span', {}, '所属顾问'),
              //     h('Icon', {
              //       props: {
              //         type: 'ios-arrow-down',
              //         size: '16'
              //       },
              //       style: {
              //         marginLeft: '5px'
              //       },
              //       nativeOn: {
              //         'mouseover': (event) => {
              //           event.stopPropagation();
              //           this.thMouseoverFun(event, 'input-affiliatedConsultant', '请输入所属顾问', 218);
              //         },
              //         'mouseleave': (event) => {
              //           event.stopPropagation();
              //           this.thMouseoutFun();
              //         }
              //       }
              //     })
              //   ])
              // }
            },
            {
              title: '所属公司 ',
              key: 'orgName',
              minWidth: 160,
              render: (h, params) => {
                return h("div", [
                  h(
                    "span",
                    {
                      style: {
                        display: "inline-block",
                        width: "100%",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                        whiteSpace: "nowrap"
                      },
                      domProps: {
                        title: params.row.orgName
                      }
                    },
                    params.row.orgName
                  )
                ]);
              },
            },
            {
              title: '所处阶段 ',
              key: 'stage',
              minWidth: 120,
              render: (h, params) => {
                return h('div',  (params.row.stageName || '-'))
              },
            },
            {
              title: '发送状态',
              key: 'status',
              minWidth: 120,
              render: (h, params) => {
                return h('div',  params.row.status == 1 ? '未发送' : params.row.status == 2 ? '已发送' : params.row.status == 3 ? '未阅' : params.row.status == 4 ? '已阅' : '-');
              },
              renderHeader: (h, params) => {
                return h('div',[
                  h('span', {}, '发送状态'),
                  h('Icon', {
                    props: {
                      type: 'ios-arrow-down',
                      size: '16'
                    },
                    style: {
                      marginLeft: '5px'
                    },
                    nativeOn: {
                      'mouseover': (event) => {
                        event.stopPropagation();
                        this.thMouseoverFun(event, 'Select-sendStatus-sendStatusList', '请选择发送状态', 200);
                      },
                      'mouseleave': (event) => {
                        event.stopPropagation();
                        this.thMouseoutFun();
                      }
                    }
                  })
                ])
              }
            },
            {
              title: '阅读时长 ',
              key: 'readTime',
              minWidth: 120,
              render: (h, params) => {
                return h('div',  params.row.readTime ? params.row.readTime + 's' : '-');
              },
            },
            {
              title: '转发次数 ',
              key: 'transmitCount',
              minWidth: 120,
              render: (h, params) => {
                return h('div',  params.row.transmitCount || '-');
              },
            },
            {
              title: '创建时间',
              key: 'createTime',
              minWidth: 180,
              // renderHeader: (h, params) => {
              //   return h('div',[
              //     h('span', {}, '创建时间'),
              //     h('Icon', {
              //       props: {
              //         type: 'ios-arrow-down',
              //         size: '16'
              //       },
              //       style: {
              //         marginLeft: '5px'
              //       },
              //       nativeOn: {
              //         'mouseover': (event) => {
              //           event.stopPropagation();
              //           this.thMouseoverFun(event, 'datePicker-creationTime-datetimerange', '请选择创建时间', 360);
              //         },
              //         'mouseleave': (event) => {
              //           event.stopPropagation();
              //           this.thMouseoutFun();
              //         }
              //       }
              //     })
              //   ])
              // }
            },
            {
              title: '发送时间',
              key: 'sendTime',
              minWidth: 180,
              // renderHeader: (h, params) => {
              //   return h('div',[
              //     h('span', {}, '发送时间'),
              //     h('Icon', {
              //       props: {
              //         type: 'ios-arrow-down',
              //         size: '16'
              //       },
              //       style: {
              //         marginLeft: '5px'
              //       },
              //       nativeOn: {
              //         'mouseover': (event) => {
              //           event.stopPropagation();
              //           this.thMouseoverFun(event, 'datePicker-sendTime-datetimerange', '请选择发送时间', 360);
              //         },
              //         'mouseleave': (event) => {
              //           event.stopPropagation();
              //           this.thMouseoutFun();
              //         }
              //       }
              //     })
              //   ])
              // }
            }
          ],
          data1: []
        }
    },
    methods: {

      //统计客户
      getNeedSendsAll(){
        
      
        //案场列表

        let params = {
          list: JSON.parse(this.$tool.getStorage("needSendsAll")),
          pageNum:this.pageData.page,
          pageSize:this.pageData.rows,
        };
        console.log(params,'paramsparamsparamsparamsparamsparamsparamszzz');

        getHousePlanReport(params)
          .then((res) => {
            console.log("置业报告列表", res);
            this.data1 = res.pageData;
            this.pageData.total = parseInt(res.total) ;
            this.$tool.clearStorage(['needSendsAll'])
          })
          .catch((err) => {
            this.$Message.error(err);
          });

      },




      // 遍历获取数组
      arrayFormat(arr,val){
        let result = '-';
        arr.map(item =>{
          if(item.value == val){
            result = item.text
          }
        })
        return result
      },
      // 导出excel
      exportExcel() {
        let mess = JSON.parse(this.userMess),{appId,userId} = mess;
        let params = {
          // page:this.pageData.page,
          // rows:this.pageData.rows,
          status: this.options.sendStatus == '-1' ? '' : this.options.sendStatus,
          reportName: this.options.reportName,
          appName:"M-Web",
          appVersion:"1.2.2",
          appId:appId,
          userId:userId
        }
        buildExport("置业报告", '/dt-business/report/backListReportExport', params);
      },
      // table 鼠标移到三角形事件
      thMouseoverFun(event, type, placeholder, width) {
        this.options.type = type
        this.options.placeholder = placeholder
        this.options.left = event.currentTarget.getBoundingClientRect().left - (width/2 - 5) <= 200 ? 200 : (event.currentTarget.getBoundingClientRect().left - (width/2 - 5) + width) > document.documentElement.clientWidth ? (document.documentElement.clientWidth - width) : event.currentTarget.getBoundingClientRect().left - (width/2 - 5)
        this.options.iconLeft = event.currentTarget.getBoundingClientRect().left
        this.options.top = event.currentTarget.getBoundingClientRect().top + 24
        this.options.width = width
      },
      // table 鼠标离开三角形事件
      thMouseoutFun() {
        this.options.setTimeout = setTimeout(() => {
          this.options.left = -1000
          this.options.top = -1000
        },100)
      },
      // table from 取消事件
      cancelFilterFun(options) {
        this.pageData= {
            total: 0,
            page: 1,
            rows: 14,
            pageSizeOpts: [20, 30, 40, 50]
          },
        this.initData();
      },
      // table from 确定事件
      okFilterFun(options) {
        this.pageData= {
            total: 0,
            page: 1,
            rows: 14,
            pageSizeOpts: [20, 30, 40, 50]
          },
        this.initData();
      },
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        this.pageData.page = page;
        // this.initData();
        if(this.$tool.getStorage("needSendsAll")){
          console.log('我是统计过来的')
          this.getNeedSendsAll();
        }else{
          console.log('我不是统计过来的')
          this.initData();
        }
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.pageData.rows = rows;
        this.pageData.page = 1;
        // this.initData();
        if(this.$tool.getStorage("needSendsAll")){
          console.log('我是统计过来的')
          this.getNeedSendsAll();
        }else{
          console.log('我不是统计过来的')
          this.initData();
        }
      },
      // 初始化获取数据
      initData() {
        let params = {
          page: this.pageData.page,
          rows: this.pageData.rows,
          status: this.options.sendStatus == '-1' ? '' : this.options.sendStatus,
          reportName: this.options.reportName
        }
        propertyReportlist(params).then(res=>{
          if (res && res.list) {
            this.data1 = res.list
            this.pageData.total = Number(res.total)
            this.$nextTick(() => {
              this.onresizeHeight = window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 100
            });
          } else {
          	this.pageData.total = 0
            this.data1 = []
          }
        }).catch(err=>{
          this.$Message.error(err)
        })

      },
    },
    computed: {

    },
    created() {
      if (window.performance.navigation.type == 1) {
        console.log("页面被刷新")
        this.$tool.clearStorage(['needSendsAll'])
      }else{
        console.log("首次被加载")
      }
      // 初始化获取数据
      console.log('zjz');
      if(this.$tool.getStorage("needSendsAll")){
        console.log('我是统计过来的')
        this.getNeedSendsAll();
      }else{
        console.log('我不是统计过来的')
        this.initData();
      }
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            this.onresizeHeight = window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 100
          }, 10);
        })();
      };
    },
    watch: {

    },
    beforeDestroy(){
      this.$tool.clearStorage(['needSendsAll'])
    }
  }
</script>
<style lang="scss" scoped>
  .allCustomersManagement{
    padding-top: 10px;
  }
  .export {
    margin:10px 0 10px 30px;
  }
  /* page */
  .pagePublicStyle {
    width: 100%;
    margin: 14px 0;
    height: 32px;
      // text-align: right;
    padding: 14px 10px;
    .totalCount {
      position: absolute;
      height: 32px;
      line-height: 32px;
      display: inline-block;
      vertical-align: top;
      color: #657180;
    }
    .pager {
      display: inline-block;
      vertical-align: top;
      position: absolute;
      right: 20px;
      background-color: #fff;
      padding-left: 50px;
    }
  }
</style>
